<template>
  <div class="el-main">
    <div class="registration-form">
      <h1>购买器械登记表</h1>
      <el-form ref="dataForm" :model="temp" label-width="100px">
        <el-form-item label="器械名">
          <el-input v-model="temp.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌">
          <el-input v-model="temp.brand"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="temp.price"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-select v-model="temp.quantity" placeholder="请选择数量">
            <el-option
              v-for="n in 10"
              :key="n"
              :label="n.toString()"
              :value="n"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="购买平台">
          <el-select v-model="temp.purchase_platform" placeholder="请选择平台">
            <el-option label="淘宝" value="淘宝"></el-option>
            <el-option label="天猫" value="天猫"></el-option>
            <el-option label="京东" value="京东"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="submitForm">提交报表</el-button>
    </div>
    <el-button type="text" @click="goBack" class="go-back">返回</el-button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      temp: {
        name: '',
        brand: '',
        price: '',
        quantity: null,
        purchase_platform: '',
      },
    };
  },
  methods: {
    submitForm() {
      // 提交表单的逻辑
      axios.post('/api/equipment/add', this.temp)
        .then(response => {
          this.$message({
            type: "success",
            message: "设备登记成功",
          });
          this.$router.push('/deviceList'); // 提交后跳转到设备列表页面
        })
        .catch(error => {
          console.error('设备登记失败:', error);
          this.$message.error("设备登记失败");
        });
    },
    goBack() {
      // 返回上一页的逻辑
      this.$router.push('/equipment');
    },
  },
};
</script>

<style scoped>
.el-main {
  background-color: #f9f9f9;
  background-image: url('@/assets/img/main.jpg'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
  min-height: 100vh; /* 使主容器至少为视窗高度 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.registration-form {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 600px;
}

h1 {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}

.go-back {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
}
</style>